<template>
  <div class="help_bg">
    <div class="loginbox">
      <h1 style="letter-spacing:20px;text-align: center;">登录</h1>
      <el-form :label-position="labelPosition" label-width="80px" :model="Login">
        <el-form-item id="lablecolr" label="账号">
          <el-input v-model="Login.Username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="Login.pwd"></el-input>
        </el-form-item>
      </el-form>
      <el-row>
        <el-button type="primary" @click="Userbtn">登录</el-button>
        <span>没有账号</span><el-button @click="Zucbtn">点击注册</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  beforeCreate () {
    const urlPah = require('../assets/bg.jpg')
    document.querySelector('body')
      .setAttribute('style', 'background-repeat:no-repeat;background-size:100%;height:100%; background-image:url("' + urlPah + '") ')
  },
  beforeDestroy () {
    document.querySelector('body').removeAttribute('style')
  },
  name: 'HelloWorld',
  methods:{
    Zucbtn(){
      const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
          target: document.querySelector('.help_bg')//loadin覆盖的dom元素节点
        });
        setTimeout(() => {
          loading.close();
          this.$router.push('/Register')
        }, 800);
     
    }
  },
  data() {
    return {
      labelPosition: 'right',
      Login: {
        Username: '',
        pwd: '',
      }
    }
  }
}
</script>


<style scoped>

.help_bg {
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
}

.loginbox {
  width: 30%;
  margin: 150px auto;
  background: rgba(255, 255, 255, 0.667);
  box-shadow: 4px 4px 6px 3px rgba(0, 0, 0, .3);
  border-radius: 10px;
  padding: 25px 15px;
}

#lablecolr {
  color: red !important;
}
</style>
